<template>
  <div class="home">
    <cube-tab-bar
      v-model="selectedLabelDefault"
      :data="tabs"
    />
    <cube-checkbox-group
      v-model="checkList"
      :options="options"
    />
    <div
      class="test"
      style="background: red"
    >
      a
    </div>
    <div
      style="width: 200px; height: 200px; background: red"
    >
      a
    </div>
    <router-link to="/demo">
      demo
    </router-link>
    <router-link to="/desktop">
      desktop2
    </router-link>
    <cube-button @click="showPicker">
      Picker
    </cube-button>
  </div>
</template>
<style scope lang="stylus">
.test
  height: 2rem
  width: 200px
</style>
<script>
import axios from 'axios'
const column1 = [ { text: '剧毒', value: '剧毒' }, { text: '蚂蚁', value: '蚂蚁' },
  { text: '幽鬼', value: '幽鬼' } ]
export default {
  name: 'Home',
  components: {
  },
  data () {
    return {
      selectedLabelDefault: 'Vip',
      tabs: [
        {
          label: 'Home',
          icon: 'cubeic-home'
        }, {
          label: 'Like',
          icon: 'cubeic-like'
        }, {
          label: 'Vip',
          icon: 'cubeic-vip'
        }, {
          label: 'Me',
          icon: 'cubeic-person'
        }
      ],
      checkList: ['1', '4'],
      options: [
        '1',
        '2',
        {
          label: '3',
          value: '3',
          disabled: true
        },
        {
          label: '4',
          value: '4',
          disabled: true
        }
      ]
    }
  },
  mounted () {
    axios.get('/api/tabs/iphone/104.json').then((res) => {
      console.log(res)
    })
  },
  methods: {
    showPicker () {
      if (!this.picker) {
        this.picker = this.$createPicker({
          title: 'Picker',
          data: [column1],
          onSelect: this.selectHandle,
          onCancel: this.cancelHandle
        })
      }
      this.picker.show()
    }
  }
}
</script>
